// App 的主方法 【rcc】 生成
import React, { Component, Fragment } from 'react'
//import { User, HooksCountExp,MyContextComponent,MyTopApp } from './components'
//import {CartHander} from './components'
import {BlogList} from './components/BlogRedux'

import store from './store'
import {Provider} from 'react-redux'

import {Home,Artical,Users, ArticalDetail} from './views'

// import {Route, Link} from 'react-router-dom'
// 修改Link为NavLink组件（增加active的class样式）
import {Route, NavLink as Link, Redirect, Switch} from 'react-router-dom'

// 如果对象不在window上，可以把引入的store 复制window.store，然后f12控制台可以输入store。可以看到该对象输出，可以对象方法输出
window.store = store // 然后对象都可以这样调试,store.getState()在f12控制台能看到传递的state数据

export default class App extends Component {
    render() {
        console.log("使用router以后，增加了Route前后props上下文信息",this.props)
        return (
            <div> 
            {/* 使用空标签 */}
            {/* <Fragment>  */}
                我的app
                {/* <HooksCountExp />
                <MyContextComponent />
                <p>分目录写的Context测试</p>
                <MyTopApp paramVal='测试高阶组件传递值' />
                <User /> */}
                {/* 学习redux ,核心要在组件上传递store，正常使用store在使用的时候引入就行 */}
                {/* <CartHander store={store} /> */}
                {/* 使用react-redux时候 */}
                {/* <CartHander /> */}
                {/* <Provider store={store}>
                    <BlogList />
                </Provider> */}

                {/* 学习路由 */}
                <ul>
                    <li><Link to="/home">首页</Link></li>
                    <li><Link to="/artical">文章</Link></li>
                    <li><Link to="/users">用户</Link></li>
                </ul>
                {/* <Home />
                <Artical />
                <Users /> */}
                {/* 根据路径渲染组件=path */}
                <Switch>
                    {/* <Route component={Home} path="/home" /> */}
                    <Route path="/home" render={(routeProps)=>{
                        console.log("路由上下文=",routeProps)
                        // 可以使用三目运算判断是否登录来做登录权限认证
                        return <Home {...routeProps} x={1} />
                    }} />
                    {/* 如果父级和子级路由，可以使用exact把父级完全匹配，也可把子级配置放到父级的签名，因为swith优先匹配原则  */}
                    <Route component={Artical} path="/artical" exact />
                    {/* 动态路由之  -  通配符路由(非保留子导航，直接跳转（不会保留子）) */}
                    <Route component={ArticalDetail} path="/artical/:id" />
                    <Route component={Users} path="/users" />
                    {/* 配置一个信息的404页面，除了component={NontFind}，也可以使用render */}
                    <Route path="/404" render={()=>{
                        render (<div>我是404页面</div>)
                    }} />
                    {/* 在Switch中Redirect匹配在最后 */}
                    <Redirect to="/home" from="/" exact />
                    <Redirect to="/404" />
                </Switch>
            {/* </Fragment> */}
            </div>
        )
    }

    componentDidMount(){
        console.log("我在App.js 里面，我是挂在完成触发的，我测试下全局扩展组件增加自定义函数")
        console.log(this.myUserAjax.getUsers)
    }
}
